<script setup lang="ts">
import { ref } from 'vue';
import { queryFactions } from '../../api/Faction';

  const tableData = ref([])
  const meta = ref({
    total: 0,
    page: 1,
    limit: 10
  })
  
  const init = (limit: number, page: number) => {
    queryFactions(limit, page).then(resp => {
        tableData.value = resp.data
        meta.value = resp.meta
    })
  }

  const handleSizeChange = (val: number) => {
    init(val, meta.value.page)
  }

  const handleCurrentChange = (val: number) => {
    init(meta.value.limit, val)
  }

  init(10, 1)
</script>

<template>
    <el-table :data="tableData" :border="true" style="width: 100%" show-overflow-tooltip>
        <el-table-column prop="symbol" label="标志" width="180" />
        <el-table-column prop="name" label="名称" width="200" />
        <el-table-column prop="headquarters" label="基地" width="120"/>
        <el-table-column prop="isRecruiting" label="正在招募" width="100px">
            <template #default="scope">
                <el-tag type="success" v-if="scope.row.isRecruiting">是</el-tag>
                <el-tag type="danger" v-else>否</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="description" label="描述"  />
    </el-table>
    <el-pagination
      v-model:current-page="meta.page"
      :page-size="meta.limit"
      size="small"
      :background="true"
      layout="total, prev, pager, next"
      :total="meta.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<style scoped>
</style>
